<template>
	<view class="my-info">
		<cu-custom :addHeight="20" isBack="true">
			<block slot="content">在线简历</block>
		</cu-custom>
		<view class="body">
			<view class="bg-height"></view>
			<view class="info-bdoy" v-if="resumeInfo">
				<view class="info-userinfo">
					<view class="material">
						<view class="name">{{resumeInfo.user_name}}</view>
						<view class="data">{{resumeInfo.user_birthday|yearFilter}}岁 | {{resumeInfo.user_sex}} |
							{{resumeInfo.working_hours|yearFilter}}年
						</view>
					</view>
					<view class="portrait">
						<image class="cu-avatar round lg" :src="resumeInfo.user_head_img" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="content">

					<view class="number-info">
						<view class="phone">
							<text class="cuIcon-mobile icon"></text>
							<text class="text">{{resumeInfo.user_phone}}</text>
						</view>
						<view class="wx border-bottom">
							<text class="cuIcon-weixin icon"></text>
							<text class="text">{{resumeInfo.user_wechat}}</text>
							<view class="edit" @tap="goPage('add-resume')">编辑</view>
						</view>
					</view>

					<view class="state-body border-bottom">
						{{resumeInfo.job_status}}
					</view>

					<view class="job-intention-body body-info border-bottom">
						<view class="header-title">
							<view class="title">
								求职意向
							</view>
						</view>
						<view class="body-item job-intention-item">
							<view class="key">
								{{resumeInfo.expected_position}}
							</view>
							<view class="value">
								{{resumeInfo.salary_requirements.join(" - ")}}
							</view>
						</view>
						<view class="body-footer">
							{{resumeInfo.user_location.join("")}}
						</view>
					</view>

					<view class="education-body body-info border-bottom">
						<view class="header-title">
							<view class="title">
								教育经历
							</view>
							<view class="edit" @tap="goPage('school-experience')">
								编辑
							</view>
						</view>
						<block v-for="(educationalItem,index) in resumeInfo.educationalList" :key="index">
							<view class="body-item education-item">
								<view class="key">
									{{educationalItem.educational_school}}
								</view>
								<view class="value">
									{{educationalItem.educational_time.join(" ~ ")}}
								</view>
							</view>
							<view class="body-footer">
								{{educationalItem.educational_major}}—{{educationalItem.educational_education}}
							</view>
							<view class="footer-info">
								<view class="cpywriting-body">
									<view class="cpywriting-item">
										<view class="cpywriting-info">
											{{educationalItem.educational_about}}
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>

					<view class="work-body body-info border-bottom">
						<view class="header-title">
							<view class="title">
								工作经历
							</view>
							<view class="edit" @tap="goPage('work-experience')">
								编辑
							</view>
						</view>
						<block v-for="(workItem,index) in resumeInfo.workList" :key="index">

							<view class="body-item education-item">
								<view class="key">
									{{workItem.work_name}}
								</view>
								<view class="value">
									{{workItem.work_time.join(" ~ ")}}
								</view>
							</view>
							<view class="body-footer">
								{{workItem.work_position}}
							</view>

							<view class="footer-info">

								<view class="cpywriting-body">
									<view class="cpywriting-item">
										<view class="cpywriting-title">
											内容：
										</view>
										<view class="cpywriting-info">
											{{workItem.work_about}}
										</view>
									</view>
									<view class="cpywriting-item">
										<view class="cpywriting-title">
											业绩：
										</view>
										<view class="cpywriting-info">
											{{workItem.work_achievement}}
										</view>
									</view>
								</view>

							</view>
						</block>
					</view>

					<view class="project-body body-info border-bottom">
						<view class="header-title">
							<view class="title">
								项目经历
							</view>
							<view class="edit" @tap="goPage('project-experience')">
								编辑
							</view>
						</view>
						<block v-for="(projectItem,index) in resumeInfo.projectList" :key="index">

							<view class="body-item education-item">
								<view class="key">
									{{projectItem.project_name}}
								</view>
								<view class="value">
									{{projectItem.project_time.join(" ~ ")}}
								</view>
							</view>
							<view class="body-footer">
								{{projectItem.project_position}}
							</view>

							<view class="footer-info">

								<view class="cpywriting-body">
									<view class="cpywriting-item">
										<view class="cpywriting-title">
											内容：
										</view>
										<view class="cpywriting-info">
											{{projectItem.project_about}}
										</view>
									</view>
									<view class="cpywriting-item">
										<view class="cpywriting-title">
											业绩：
										</view>
										<view class="cpywriting-info">
											{{projectItem.project_achievement}}
										</view>
									</view>
								</view>

							</view>
						</block>
					</view>

					<view class="major-body body-info border-bottom">
						<view class="header-title">
							<view class="title">
								专业技能
							</view>
							<view class="edit" @tap="goPage('professional')">
								编辑
							</view>
						</view>
						<view class="body-item major-item">
							{{resumeInfo.major_about}}
						</view>
					</view>

					<view class="evaluate-body body-info border-bottom">
						<view class="header-title">
							<view class="title">
								个人评价
							</view>
							<view class="edit" @tap="goPage('self-evaluation')">
								编辑
							</view>
						</view>
						<view class="body-item evaluate-item">
							{{resumeInfo.evaluate_about}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="big-resume">
			<button class="big-btn" open-type="share">
				分享简历
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				resumeId: ''
			};
		},
		onLoad(option) {
			this.resumeId = option.resumeId
		},
		computed: {
			resumeInfo() {
				return this.$store.getters['resume/getResumeByIdData'](this.resumeId)
			}
		},
		methods: {
			goPage(page) {
				if (page == 'add-resume') {
					let info = this.$comm.getObjVal(this.resumeInfo, [
						"user_name", "user_head", "user_head_img", "job_status", "user_sex", "user_birthday",
						"user_phone",
						"user_wechat",
						"user_mail", "user_location", "working_hours", "salary_requirements", "expected_position"
					])
					this.$store.commit('update/setInfoData', info)
					uni.$once('updateInfo', (_info) => {
						let _resumeInfo = JSON.parse(JSON.stringify(this.resumeInfo))
						Object.assign(_resumeInfo, _info)
						this.$api.updateResume(_resumeInfo).then(res => {
							if (res.code) {
								this.$comm.successToShow("修改成功")
								this.$store.commit('resume/setResumeByIdData', _resumeInfo)
							}
						})
					})
				} else if (page == 'school-experience') {
					let info = this.$comm.getObjVal(this.resumeInfo, ['educationalList'])
					this.$store.commit('update/setSchoolInfoData', info.educationalList[0])
					uni.$once('updateSchoolInfo', (_schoolInfo) => {
						let _resumeInfo = JSON.parse(JSON.stringify(this.resumeInfo))
						Object.assign(_resumeInfo, {
							educationalList: [_schoolInfo]
						})
						this.$api.updateResume(_resumeInfo).then(res => {
							if (res.code) {
								this.$comm.successToShow("修改成功")
								this.$store.commit('resume/setResumeByIdData', _resumeInfo)
							}
						})
					})
				} else if (page === 'work-experience') {
					let info = this.$comm.getObjVal(this.resumeInfo, ['workList'])
					this.$store.commit('update/setWorkInfoData', info.workList[0])
					uni.$once('updateWorkInfo', (_workInfo) => {
						let _resumeInfo = JSON.parse(JSON.stringify(this.resumeInfo))
						Object.assign(_resumeInfo, {
							workList: [_workInfo]
						})
						this.$api.updateResume(_resumeInfo).then(res => {
							if (res.code) {
								this.$comm.successToShow("修改成功")
								this.$store.commit('resume/setResumeByIdData', _resumeInfo)
							}
						})
					})
				} else if (page === 'project-experience') {
					let info = this.$comm.getObjVal(this.resumeInfo, ['projectList'])
					this.$store.commit('update/setProjectInfoData', info.projectList[0])
					uni.$once('updateProjectInfo', (_projectInfo) => {
						let _resumeInfo = JSON.parse(JSON.stringify(this.resumeInfo))
						Object.assign(_resumeInfo, {
							workList: [_projectInfo]
						})
						this.$api.updateResume(_resumeInfo).then(res => {
							if (res.code) {
								this.$comm.successToShow("修改成功")
								this.$store.commit('resume/setResumeByIdData', _resumeInfo)
							}
						})
					})
				} else if (page === 'professional') {
					let info = this.$comm.getObjVal(this.resumeInfo, ['major_about'])
					this.$store.commit('update/setMajorInfoData', info['major_about'])

					uni.$once('updateMajorInfo', (_majorInfo) => {
						let _resumeInfo = JSON.parse(JSON.stringify(this.resumeInfo))
						Object.assign(_resumeInfo, {
							major_about: _majorInfo
						})
						this.$api.updateResume(_resumeInfo).then(res => {
							if (res.code) {
								this.$comm.successToShow("修改成功")
								this.$store.commit('resume/setResumeByIdData', _resumeInfo)
							}
						})
					})
				} else if (page === 'self-evaluation') {
					let info = this.$comm.getObjVal(this.resumeInfo, ['evaluate_about'])
					this.$store.commit('update/setEvaluateInfoData', info['evaluate_about'])

					uni.$once('updateEvaluateInfo', (_evaluateInfo) => {
						let _resumeInfo = JSON.parse(JSON.stringify(this.resumeInfo))
						Object.assign(_resumeInfo, {
							evaluate_about: _evaluateInfo
						})
						this.$api.updateResume(_resumeInfo).then(res => {
							if (res.code) {
								this.$comm.successToShow("修改成功")
								this.$store.commit('resume/setResumeByIdData', _resumeInfo)
							}
						})
					})
				}
				this.$comm.navigateTo(`/pages/${page}/${page}?pageType=update`)
			}
		},
		onShareAppMessage: function() {
			return {
				title: this.resumeInfo.resume_name,
				path: 'pages/share-info/share-info?resumeId=' + this.resumeId,
			};
		}
	}
</script>

<style lang="scss">
	.my-info {
		position: relative;

		@include btnStyle(40upx);
		@include button-init;

		.body {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 60upx;

			.bg-height {
				width: 100%;
				height: 200upx;
				background-color: $index-color;
			}

			.info-bdoy {
				background-color: #FFFFFF;
				width: 96%;
				min-height: 200upx;
				position: relative;
				top: -120upx;
				border-radius: 12upx;
				display: flex;
				flex-direction: column;

				.info-userinfo {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 10upx 60upx 10upx;
					height: 96upx;
					box-sizing: content-box;

					.material {
						color: $font-c10;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							font-size: 32upx;
						}

						.data {
							font-size: 28upx;
						}
					}
				}
			}

			.content {
				padding: 16upx 20upx;
				color: $font-c10;

				.icon {
					color: $font-c53;
					font-size: 38upx;
				}

				.text {
					color: $font-c53;
					font-size: 30upx;
				}

				.edit {
					color: $index-color;
					font-size: 32upx;
				}

				.number-info {

					.phone,
					.wx {
						position: relative;
						line-height: 56upx;
						display: flex;
						align-items: center;

						.text {
							margin-left: 16upx;
							flex: 1;
						}
					}

					.wx {
						padding-bottom: 30upx;
					}
				}

				.state-body {
					position: relative;
					line-height: 94upx;
				}

				.job-intention-body.body-info {
					.job-intention-item {
						.value {
							color: $index-color;
						}
					}
				}

				.education-body.body-info {
					.education-item {
						.value {
							color: $font-c10;
						}
					}
				}

				.body-info {
					position: relative;
					display: flex;
					flex-direction: column;
					padding-top: 32upx;
					padding-bottom: 32upx;

					&>view:not(.header-title) {
						padding-left: 10upx;
					}

					.header-title {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.title {
							font-size: 32upx;
							color: $font-c10;
							position: relative;
							padding-left: 30upx;

							&::before {
								content: " ";
								position: absolute;
								left: 0;
								top: 0;
								bottom: 0;
								width: 12upx;
								height: 100%;
								background-color: $index-color;
							}
						}
					}

					.body-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-top: 20upx;

						.key {
							font-size: 32upx;
							color: $font-c10;
						}

						.value {
							font-size: 28upx;
							color: $font-cA7;
						}
					}

					.body-footer {
						padding-top: 20upx;
						color: $font-cA7;
						font-size: 26upx;
					}

					.cpywriting-body {
						.cpywriting-item {
							display: flex;
							flex-direction: column;
							padding-top: 20upx;

							.cpywriting-title {
								font-size: 32upx;
								color: $font-c10;
							}

							.cpywriting-info {
								margin-top: 4upx;
								font-size: 26upx;
							}
						}
					}
				}

				.border-bottom::after {
					box-sizing: content-box;
					content: " ";
					width: 200%;
					height: 200%;
					position: absolute;
					top: 0;
					left: 0;
					border-radius: inherit;
					transform: scale(0.5);
					transform-origin: 0 0;
					pointer-events: none;
					box-sizing: border-box;
					border-bottom: 1rpx solid $border-cBBB;
				}
			}
		}
	}
</style>
